<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {useStore} from '~/stores/user';
import userService from "~/service/user";
import {useRouter} from "vue-router";
import {layer} from "@layui/layui-vue";
import {CacheToken} from "~/constants/cacheKey";
import {setCache} from "~/utils/cache";

const toast = () => {
    layer.msg("Hello", { icon: 1, time: 1000 })
};

const store = useStore();
const router = useRouter();

const state = reactive({
    captchaUrl: "",
    loading: false,
    year: new Date().getFullYear()
});

const login = reactive({ username: "", password: "", captcha: "", uuid: "" });

onMounted(() => {
    //清理数据
    store.logout();
});
const formRef = ref();

const rules = ref({
    username: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
    password: [{ required: true, message: "必填项不能为空", trigger: "blur" }]
});

const onLogin = () => {
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            state.loading = true;
            userService.login(login).then((res) => {
                state.loading = false;
                if (res.code === 0) {
                    setCache(CacheToken, res.data, true);
                    layer.msg("登录成功", { icon: 1, time: 1000 })
                    router.push("/");
                } else {
                    layer.msg(res.msg, { icon: 2, time: 1000 })
                }
            })
                .catch(() => {
                    state.loading = false;
                });
        }
    });
};
</script>

<template>
    <div class="container">
        <lay-row space="10">
            <lay-col md-offset="8" md="8">
                <lay-card>
                    <div class="logo-main">
                        <img style="height: 30px; margin-right: 10px;" src="../../assets/login-icon.png">
                        <h1 style="text-align: center; font-size: 30px; margin: 0px; font-weight: 600;">Easy-docker</h1>
                    </div>
                    <lay-form ref="formRef" :rules="rules" :model="login" label-position="top">
                        <lay-form-item label="账户" prop="username">
                            <lay-input type="text" v-model="login.username"></lay-input>
                        </lay-form-item>
                        <lay-form-item label="密码" prop="password">
                            <lay-input type="password" v-model="login.password"></lay-input>
                        </lay-form-item>
                        <lay-button @click="onLogin" class="login-button" type="primary">登录</lay-button>
                    </lay-form>
                    <lay-line margin="16px" contentPosition="right">
                        <a href="https://gitee.com/ayiba/easy-docker" target="_blank"
                            style="color: lightgray; text-decoration: none;">源码地址</a>
                    </lay-line>
                </lay-card>
            </lay-col>
        </lay-row>
    </div>
</template>

<style lang="scss">
body {
    background: #f3f3f3;
}

.logo-main {
    display: flex;
    justify-content: center;
    margin: 10px;
    align-items: center;
}

.container {
    padding: 10%;

}

.login-button {
    width: 100%;
}
</style>
